<template>
    <div>
      <div class="topBox">
        <h1>树洞</h1>
        <div class="rightOne" v-on:click="ToDtail()">个人信息</div>
        <div class="rightTwo" v-on:click="ToMyMessage()">我的内容</div>
      </div>
      <hr>
      <div class="centerBox">
        <el-input
            type="text"
            placeholder="请输入名称"
            v-model="messageBoard.author"
            maxlength="16"
            show-word-limit
        >
        </el-input>
        <div style="margin: 20px 0;"></div>
        <el-input
            type="textarea"
            placeholder="请输入留言"
            v-model="messageBoard.message"
            show-word-limit
        >
        </el-input>
        <div style="margin: 20px 0;"></div>
        <el-button type="primary" plain @click="postMessage">留言</el-button>
        <el-divider></el-divider>
        <el-table
            :data="messages"
            height="250"
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              label="序号"
              width="120">
          </el-table-column>
          <el-table-column
              prop="author"
              label="名称"
              width="120">
          </el-table-column>
          <el-table-column
              prop="message"
              label="留言">
          </el-table-column>
          <el-table-column
              prop="mtime"
              label="时间"
              width="160">
          </el-table-column>
        </el-table>
        <el-link type="primary" href="https://github.com/Enaium">By Enaium</el-link>
      </div>

    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                messageBoard: {
                    author: '',
                    message: '',
                },
                messages: []
            }
        },
        methods: {
          async postMessage() {
                //未输入名字时为用户名
                // if (this.messageBoard.author === '') {
                //     this.$message.error('请输入你的名字');
                //     return
                // }

                if (this.messageBoard.message === '') {
                    this.$message.error('请输入留言');
                    return
                }

                await axios.get("http://localhost:8181/addmessage?author=" + this.messageBoard.author + "&message=" + this.messageBoard.message + "&uid=" + this.$store.state.uid).then((t) => {
                    if (t.data === 1) {
                        this.$message({
                            message: '留言成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('留言失败');
                    }
                })
              axios.get("http://localhost:8181/selectallmessage").then((t) => {
                this.messages = t.data
                console.log(this.messages)
              })
            },
          ToDtail() {
            this.$router.push('/userDetail')
          },
          ToMyMessage() {
              this.$router.push('/myMessage')
          }
        },
        created() {
            axios.get("http://localhost:8181/selectallmessage").then((t) => {
                this.messages = t.data
              console.log(this.messages)
            })
        },
        mounted() {
          console.log(this.$store.state.uid)
        },

    }
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }
  .topBox {
    position: relative;
    padding: 20px;
  }
  .rightOne {
    position: absolute;
    right: 10px;
  }
  .rightTwo {
    position: absolute;
    right: 80px;
  }

  .centerBox {
    position: absolute;
    top: 20%;
    left: 20%;
    right: 20%;
  }
</style>
